<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">终端用户在线时长</div> 
      <div class="sn-body" style="bottom: 20px"> 
        <div class="wrap-container">

          <div class="table">
            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
              <tbody>
                <tr>
                  <td width="40%">
                    <span>终端名</span>
                  </td>
                  <td width="30%">
                    <span>最后一次接入日期</span>
                  </td>
                  <td width="30%">
                    <span>时长</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="seamless-warp">
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                  <tbody>
                    <tr v-for="(item, index) in front" :key="index">
                      <td width="40%">
                        <span>{{ item.account }}</span>
                      </td>
                      <td width="30%">
                        <span>{{ item.accessTime }}</span>
                      </td>
                      <td width="30%">
                        <span>{{ item.onlineTime }}</span>
                      </td>
                    </tr>
                  </tbody>
              </table>
            </div>
            <vue-seamless-scroll v-if="listData.length" :data="listData" class="seamless-warp" :class-option="optionSetting">
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                <tbody>
                  <tr v-for="(item, index) in listData" :key="index">
                    <td width="40%">
                      <span>{{ item.account }}</span>
                    </td>
                    <td width="30%">
                      <span>{{ item.accessTime }}</span>
                    </td>
                    <td width="30%">
                      <span>{{ item.onlineTime }}</span>
                    </td>
                  </tr>
                </tbody>
            </table>
            </vue-seamless-scroll>
          </div>

        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "seamless",
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
     listData: [
       {
         account: '终端4',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端5',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端6',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端7',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端8',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端9',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端10',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端11',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端12',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端13',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端14',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端15',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },
     ],
      front: [{
         account: '终端1',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端2',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },{
         account: '终端3',
         accessTime: '2021-05-01',
         onlineTime: '123'
       },]
    }
  },
  created() {
    // this.getData();
  },
  computed: {
　　optionSetting () {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },  
  mounted() {
    
  },
  methods: {
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.sn-container {

  .table {
    .table-header {
      width: 100%;
      height: 35px;
      table-layout: fixed;
      tr {
        td {
          padding: 10px 5px;
          text-align: center;
          background-color: transparent;
          white-space: nowrap;
          overflow: hidden;
          color: #E2E5FF;
          font-size: 14px;
        }
      }
    }
    .seamless-warp {
      height: 100%;
      overflow: hidden;
      visibility: visible;
      .colorRed {
        color: #FF4669;
      }
      .colorOrange {
        color: #FFC956;
      }
      .item {
        height: auto;
        width: 100%;
        height: 35px;
        table-layout: fixed;
        tr {
          td {
            padding: 10px 5px;
            text-align: center;
            background-color: transparent;
            white-space: nowrap;
            overflow: hidden;
            color: #E2E5FF;
            font-size: 14px;
          }
        }
        tr {
          td {
            &.title {
              text-overflow: ellipsis;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>
